<template>
  <div class="live_streaming_room_list">
    <div class="title">
      <div class="l">当前直播</div>
      <div class="r" @click="more">查看更多 >>></div>
    </div>
    <div class="box">
      <div
        class="item"
        :class="'item' + index"
        v-for="(item, index) in liveStreamingRoomList"
        :key="index"
        @click="itemCLickHandel(item)"
      >
        <div class="t"><img :src="QNURL + item?.cover" alt="" /></div>
        <div class="b">
          <div class="b_title">{{ item.roomName }}</div>
          <div class="info">
            <span class="name">{{ item?.nickName }}</span>
            <span class="time">{{ item?.orderTime }}</span>
            <span
              class="yy"
              @click="orderLiveStreamingFun(item)"
              v-if="item?.status == 0 && item.userId != userInfo?.userId"
              >立即预约</span
            >
            <span class="zb" v-if="item?.status == 1">正在直播</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { QNURL } from "@/config/urlConfig";
import { useUserStoreHook } from "@/store/modules/user";
import { computed } from "vue";

const userStore = useUserStoreHook();

const userInfo = computed(() => userStore.getUserInfo);

const router = useRouter();

const emit = defineEmits(["orderLiveStreamingFun"]);

defineProps({
  liveStreamingRoomList: {
    type: Array as () => Array<any>,
    default: () => []
  }
});

function itemCLickHandel(item: any) {
  if (item.status == 1) {
    router.push({
      path: "/live_streaming",
      query: {
        id: item.id
      }
    });
  }
}

function orderLiveStreamingFun(item: any) {
  emit("orderLiveStreamingFun", item);
}

function more() {
  router.push({
    path: "/morelivestreaming"
  });
}
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
.live_streaming_room_list {
  width: 100%;
  margin-top: 50px;

  .title {
    width: 100%;
    height: 50px;
    // background: linear-gradient(to left, #fff, #e6e5e5);
    border-bottom: 2px solid #dedfe0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 20px;

    .l,
    .r {
      flex: 1;
      font-size: 20px;
      font-weight: bold;
    }

    .r {
      text-align: right;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
  }

  .box {
    width: 100%;
    display: grid;
    grid-template-columns: 460px 235px 235px 235px;
    // grid-template-columns: 2fr 1fr 1fr 1fr;
    // grid-template-rows: 240px 120px;
    gap: 10px;
    grid-template-areas:
      "A B C D"
      "A E F G";

    .item {
      background-color: #fff;
      border-radius: 10px;
      // padding: 10px;
      box-shadow: 1px 1px 1px 1px #dedfe0;
      display: inline;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 180px;

      img {
        border-radius: 5px;
      }

      .t {
        width: 100%;
        height: 70%;
      }

      .b {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding: 5px 10px;

        &_title {
          font-size: 15px;
          transition: all 0.3s;

          &:hover {
            color: #ff6633;
          }
        }

        .info {
          font-size: 12px;
          margin-top: 5px;

          .name {
            margin-right: 5px;
            color: #666;
            border-right: 1px solid #ccc;
            padding-right: 5px;
          }

          .zb {
            font-size: 13px;
            color: red;
            margin-right: 5px;
          }

          .time {
            color: #666;
          }

          .yy {
            margin-left: 10px;
            font-size: 13px;
            color: #409eff;
          }
        }
      }
    }

    .item0 {
      grid-area: A;
      // width: 440px;
      height: 370px;

      .t {
        height: 75%;
      }
      .b {
        height: 25%;
        padding: 20px 20px;

        &_title {
          font-size: 25px;
        }

        .info {
          font-size: 16px;
          margin-top: 5px;

          .zb {
            font-size: 20px;
            margin-right: 5px;
          }

          .time {
            color: #666;
          }

          .yy {
            margin-left: 10px;
            font-size: 18px;
            color: #409eff;
          }
        }
      }
    }
    .item1 {
      grid-area: B;
    }
    .item2 {
      grid-area: C;
    }
    .item3 {
      grid-area: D;
    }
    .item4 {
      grid-area: E;
    }
    .item5 {
      grid-area: F;
    }
    .item6 {
      grid-area: G;
    }
  }
}
</style>
